'use strict';
import React, {Component, PropTypes}      from 'react';
import { connect }                        from 'react-redux';
import { Modal,Switch,Input,Form,Select } from 'antd';
import { setDialog }                      from '../../../reducers/common/actions.js';
import { saveRow,getRoleOptions }         from '../../../reducers/user/actions.js';

const FormItem = Form.Item;

class UserEditDialog extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let { row,dialogKey,confirmLoading,modalTitle } = this.props;
        let visible = this.props.dialog[dialogKey] ? true : false;
        const { getFieldProps } = this.props.form;
        row = row ? row : {};
        modalTitle = ( row.key ? "修改" : "新加" ) + modalTitle;
        const nameProps = getFieldProps('name', {
            initialValue:row.name,
            rules: [
                { required: true, max: 20,min: 2,message: '至少2位字符' },
            ]
        });
        const emailProps = getFieldProps('email', {
            initialValue:row.email,
            validate: [{
                rules: [
                    { },
                ],
                trigger: 'onBlur',
            },
                {
                rules: [
                    { type: 'email', message: '请输入正确的邮箱地址' }
                ],
                trigger: ['onBlur', 'onChange'],
            }]
        });

        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 }
        };

        return (
            <Modal
                title={modalTitle}
                visible={visible}
                confirmLoading={confirmLoading}
                onOk={this.handleOk.bind(this)}
                onCancel={this.handleCancel.bind(this)} >
                    <Form horizontal>
                        <FormItem
                            hasFeedback
                            {...formItemLayout}
                            label="姓名" >
                            <Input type="text" {...nameProps} placeholder="" />
                        </FormItem>
                        <FormItem
                            hasFeedback
                            help="邮箱不合法"
                            {...formItemLayout}
                            label="邮箱" >
                            <Input type="email" {...emailProps} placeholder="" />
                        </FormItem>
                    </Form>

            </Modal>
        )
    }
    handleOk(){
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                return;
            }
            this.props.saveRow(values,()=>{
                this.props.setDialog(this.props.dialogKey,false);
            })
        });
    }
    handleCancel(e){
        let { confirmLoading } = this.props;
        if( confirmLoading ) return false;
        this.props.setDialog(this.props.dialogKey,false);
    }
}
UserEditDialog.propTypes = {
    dialogKey :PropTypes.string.isRequired,
    modalTitle:PropTypes.string.isRequired
};
UserEditDialog.defaultProps = {
    modalTitle:""
};
export default connect(
    state =>{
        return {
            roleOptions:state.user.roleOptions,
            row:state.user.row,
            confirmLoading:state.common.loading,
            dialog: state.common.dialog,
        };
    },
    dispatch => {
        return {
            setDialog:(key,value)=>dispatch(setDialog(key,value)),
            saveRow:(row,cb)=>dispatch(saveRow(row,cb)),
            getRoleOptions:()=>dispatch(getRoleOptions())
        }
    }
)(Form.create()(UserEditDialog));